<script setup>
import icon1 from "@/assets/img1.png"
import icon2 from "@/assets/img2.png"
import icon3 from "@/assets/img3.png"
import icon4 from "@/assets/img4.png"
import {ref} from "vue"
import {useRouter} from "vue-router";
const router = useRouter()
const list = ref([
  {
    icon: icon1,
    name: '库存调拨',
    url: '/InventoryTransfer'
  },
  {
    icon: icon2,
    name: '库存盘点',
    url: '/InventoryStocktaking'
  },
  {
    icon: icon3,
    name: '出库列表',
    url: '/OutboundList'
  },
  {
    icon: icon4,
    name: '入库列表',
    url: '/IncomingList'
  }
])
const jumpFn = (item) => {
  if (item.url){
    router.push(item.url)
  }
}
</script>

<template>
  <div class="marginTop w-full grid grid-cols-2 gap-4">
    <div class="h-[160px] roundCorner backgroundColor flex justify-center items-center  flex-col" v-for="(item, index) in list" :key="index" @click="jumpFn(item)">
      <van-image
          width="88"
          height="88"
          :src="item.icon"
      />
      <div class="px-[35px] marginTop elasticity">
        <div class="text-[14px] font-bold">{{item.name}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>